@import '~styles/variables.scss';
@import '~styles/mixin.scss';

.customer-title{
	font-size: 32px;
	margin-bottom: 22px;
}
.e-text{
	letter-spacing: 6px;
}
.help-customer{
	background-color: #F5F5F5;
	.help-customer--contain{
		padding: 50px 40px;
		&:hover{
			i{
				opacity: 1!important;
			}
		}
		.slide-group{
			overflow: hidden;
			margin-top: 60px;
			.slides{
				height: 118px;
				width: 710px;
				overflow: hidden;
				float: left;
				margin: 0 151px;
				box-sizing: border-box;
				position: relative;
				.slides-contain{
					position: relative;
					left: 0;
					height: 94px;
					&.istransition{
						transition: left ease 0.3s;
					}
					img.now-big{
						width: 118px;
						height: 118px;
						margin: 0;
					}
				}
				img{
					display: block;
					border-radius: 50%;
					width: 94px;
					height: 94px;
					margin: 0 24px;
					margin-top: 12px;
					float: left;
				}
			}
			i{
				opacity: 0;
				float: left;
				color: #C9C8C8;
				line-height: 110px;
				cursor: pointer;
				font-size: 54px;
			}
		}
	}
}
.customer-demo{
	padding: 50px 0;
	padding-bottom: 19px;
	overflow: hidden;
	.demo-list{
		margin-top: 80px;
		padding: 0 40px;
		overflow: hidden;
		.demo-one{
			width: 360px;
			height: 352px;
			float: left;
			margin-left: 20px;
			margin-bottom: 9px;
			position: relative;
			&:hover{
				.mengban{
					opacity: 0.3;
				}
			}
			.mengban{
				width: 360px;
				height: 197px;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 1);
				opacity: 0;
				transition: all ease 0.3s;
			}
			&:nth-child(3n + 1) {
				margin-left: 0;
			}
			.demo-img{
				width: 360px;
				height: 197px;
				display: block;
				cursor: pointer;
			}
			.demo-text{
				padding: 0 22px;
				padding-top: 32px;
				font-size: 16px;
				line-height: 14px;
				border: 1px solid #f5f5f5;
				border-bottom: 0;
				a{
					color: #666;
					&:hover{
						color: #326eaa;
					}
				}
			}
			.demo-data{
				border: 1px solid #f5f5f5;
				border-top: 0;
				font-size: 14px;
				color: #326eaa;
				padding: 22px;
				.data-one{
					display: inline-block;
					width: 103px;
					height: 50px;
					box-sizing: border-box;
					&:nth-child(1) {
						text-align: left;
					}
					&:nth-child(2) {
						text-align: center;
					}
					&:nth-child(3) {
						text-align: right;
					}
					.two-line{
						line-height: 14px;
						margin-top: 15px;
					}
				}
			}
		}
	}
}
